<template>
    <view class="container">
        <!--筛选弹框-->
        <uni-popup ref="alertDialog" type="top" background-color="#fff" @change="change"
            borderRadius="0rpx 0rpx 20rpx 20rpx">
            <view class="popup-content">
                <view class="popupItem">
                    <view class="title">
                        支付方式
                    </view>
                    <view class="button-wrapper">
                        <view v-for="(item, index) in buttons" :key="index" class="button"
                            :class="{ checked: item.checked }" @click="itemChecked(item)">
                            {{ item.label }}
                        </view>
                    </view>
                    <view class="buttonBox">
                        <view @click="reset" class="button button-reset">重置</view>
                        <view @click="confirm" class="button button-confirm">确定</view>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { showToast } from "@/utils/toast";
onLoad(() => { });

onShow(() => { });
const props = defineProps({
    // 是否显示面板
    show: Boolean,
    // 确定时是否关闭面板
    closeOnOk: {
        type: Boolean,
        default: true,
    },
});
// 创建响应式数据  
const alertDialog = ref();
let buttons = ref([
    {
        id: 1,
        label: "微信"
    },
    {
        id: 2,
        label: "支付宝"
    },
    {
        id: 3,
        label: "银行卡"
    }
])
// 选项被选中时
function itemChecked(item) {
    item.checked = !item.checked;
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
<style lang="scss"></style>